<!--自定义的弹框组件-->
<template>
  <input type="checkbox" id="my-modal" :checked="dialogVisible" class="modal-toggle"/>

  <div class="modal ">
    <div class="modal-box p-4" :class="[customSize.high,customSize.width,customSize.max]">
<!--    <div class="modal-box h-2/3 w-full max-w-3xl p-4">-->
      <button class="btn btn-sm btn-circle absolute right-2 top-2" @click="closed">✕</button>

      <h3 class="font-bold text-lg">{{ title }}</h3>

      <div class="py-4 flex flex-col justify-center">
        <slot>
          <p>You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
        </slot>
      </div>

      <div class="modal-action m-0 p-0">
        <slot name="btn-bar">

        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineEmits, defineProps, watch,ref} from 'vue'

//父组件传值时的定义
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
    required: false
  },
  title: {
    type: String,
    default: "Title",
    required: false
  },
  customSize: {
    type: Object,
    default: {
      high: "",
      width: "",
      max: "",
    },
    required: false
  },
})

const emits = defineEmits([
  "open", "closed"
])

const open = () => emits('open')
const closed = () => emits('closed')

//监听dialogVisible的变化
watch(() => props.dialogVisible, (newVal, oldVal) => {
  if (newVal) open()
})

</script>

<style scoped>

</style>
